<template>
  <div class="employee-process">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">员工资料管理流程</h2>
      </div>
    </div>

    <div class="content">
      <el-row :gutter="20">
        <!-- 基本信息管理 -->
        <el-col :span="8">
          <el-card class="function-card" shadow="hover" @click.native="goToBasicInfo">
            <div class="card-header">
              <i class="el-icon-user"></i>
              <span>基本信息管理</span>
            </div>
            <div class="card-content">
              <p>员工基本信息的录入、修改和维护</p>
              <ul class="feature-list">
                <li><i class="el-icon-check"></i> 个人信息</li>
                <li><i class="el-icon-check"></i> 联系方式</li>
                <li><i class="el-icon-check"></i> 教育背景</li>
              </ul>
            </div>
          </el-card>
        </el-col>

        <!-- 合同管理 -->
        <el-col :span="8">
          <el-card class="function-card" shadow="hover" @click.native="goToContract">
            <div class="card-header">
              <i class="el-icon-document"></i>
              <span>合同管理</span>
            </div>
            <div class="card-content">
              <p>员工劳动合同的管理与维护</p>
              <ul class="feature-list">
                <li><i class="el-icon-check"></i> 合同签订</li>
                <li><i class="el-icon-check"></i> 合同续签</li>
                <li><i class="el-icon-check"></i> 合同变更</li>
              </ul>
            </div>
          </el-card>
        </el-col>

        <!-- 档案管理 -->
        <el-col :span="8">
          <el-card class="function-card" shadow="hover" @click.native="goToArchive">
            <div class="card-header">
              <i class="el-icon-folder"></i>
              <span>档案管理</span>
            </div>
            <div class="card-content">
              <p>员工档案资料的管理与维护</p>
              <ul class="feature-list">
                <li><i class="el-icon-check"></i> 证件资料</li>
                <li><i class="el-icon-check"></i> 工作履历</li>
                <li><i class="el-icon-check"></i> 培训记录</li>
              </ul>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EmployeeProcess',
  methods: {
    async goToBasicInfo() {
      try {
        await this.$router.push('/main/renshi/employee/basic')
      } catch (error) {
        if (error.name !== 'NavigationDuplicated') {
          console.error('导航失败:', error)
          this.$message.error('页面跳转失败，请稍后重试')
        }
      }
    },
    async goToContract() {
      try {
        await this.$router.push('/main/renshi/employee/contract')
      } catch (error) {
        if (error.name !== 'NavigationDuplicated') {
          console.error('导航失败:', error)
          this.$message.error('页面跳转失败，请稍后重试')
        }
      }
    },
    async goToArchive() {
      try {
        await this.$router.push('/main/renshi/employee/archive')
      } catch (error) {
        if (error.name !== 'NavigationDuplicated') {
          console.error('导航失败:', error)
          this.$message.error('页面跳转失败，请稍后重试')
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.employee-process {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);

  .header {
    margin-bottom: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    
    .header-content {
      position: relative;
      text-align: center;

      .back-btn {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        text-decoration: none;
        color: #606266;
        display: flex;
        align-items: center;

        &:hover {
          color: #409EFF;
        }

        i {
          margin-right: 5px;
        }
      }

      .page-title {
        margin: 0;
        font-size: 24px;
        color: #303133;
      }
    }
  }

  .content {
    .function-card {
      height: 100%;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      }

      .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        i {
          font-size: 24px;
          color: #409EFF;
          margin-right: 10px;
        }

        span {
          font-size: 18px;
          color: #303133;
          font-weight: 500;
        }
      }

      .card-content {
        p {
          margin: 0 0 15px;
          color: #606266;
          line-height: 1.5;
        }

        .feature-list {
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            color: #606266;

            i {
              color: #67C23A;
              margin-right: 8px;
            }
          }
        }
      }
    }
  }
}
</style> 